<template>
       <el-tabs type="border-card" v-model="listQuery.search.type" @tab-click="handleClick">
            <el-tab-pane label="图片" name="1">
                 <ul class="el-upload-list el-upload-list--picture-card">
                    <li class="el-upload-list__item is-ready" v-for="(item,inx) in list" :key="inx">
                        <img :src="item.src_text" alt="" class="el-upload-list__item-thumbnail"  />
                        <span class="el-upload-list__item-actions" @click="checkPicture(item)">
                        <span class="el-upload-list__item-preview" >
                            <i class="el-icon-circle-check"></i>
                        </span>
                    
                        </span>
                    </li>
                </ul>
            </el-tab-pane>
            <el-tab-pane label="视频" name="2">
                 <ul class="el-upload-list el-upload-list--picture-card" v-if="list.length">
                    <li class="el-upload-list__item is-ready" v-for="(item,inx) in list" :key="inx">
                        <i class="el-icon-folder-opened i-file"></i >
                        <span class="el-upload-list__item-actions" @click="checkPicture(item)">
                        <span class="el-upload-list__item-preview" >
                            <i class="el-icon-circle-check"></i>
                        </span>
                    
                        </span>
                    </li>
                </ul>
            </el-tab-pane>
            <el-tab-pane label="文件" name="3">
                 <ul class="el-upload-list el-upload-list--picture-card"  v-if="list.length">
                    <li class="el-upload-list__item is-ready" v-for="(item,inx) in list" :key="inx">
                        <video  :src="item.src_text" controls="controls"></video>
                        <span class="el-upload-list__item-actions" @click="checkPicture(item)">
                            <span class="el-upload-list__item-preview" >
                                <i class="el-icon-circle-check"></i>
                            </span>
                    
                        </span>
                    </li>
                </ul>
            </el-tab-pane>
            
            <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="listQuery.page"
                    :page-size="listQuery.total"
                    :page-sizes="listQuery.pageSizes"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="parseInt(listQuery.totalCount)"
                    ></el-pagination>
            <div v-if="limits>1" style="margin-top:50px;text-align:center;">
                 <el-button type="primary" @click="onSubmit">确 定</el-button>
                 <el-button @click="cancel">取 消</el-button>
            </div>        
        </el-tabs>
</template>

<script>
import {getCoverList} from "@/api/common";
export default {
    props:{
        isPrivate:{
            type:Number,
            default:0
        },
        limits:{
            type:Number,
            default:1
        }
    },
    data(){
        return {
            list:[],
            listQuery: {
                page: 1,
                total: 18,
                totalCount:0,
                pageSizes:[10,20,50,100, 200, 300, 400],
                
                search:{
                    type:'1',
                }
            },
        }
    },
    mounted(){
        this.init();
    },
    methods: {
        async init() {
            this.listQuery.search.is_private = this.isPrivate;
            const res = await getCoverList(this.listQuery);
            if (res.code == 200) {
                this.list = res.data.list;
                this.listQuery.totalCount = res.data.totalCount;
            }
        },
        handleCurrentChange(val){
            this.listQuery.page = val;
            this.init();
        },
        handleSizeChange(val){
            this.listQuery.total = val;
            this.init();
        },
        checkPicture(item){
            if(this.limits == 1) {
                this.$emit('checkPicture',[item]);
            }else {
                this.list.map((vl)=>{
                    if(item.id == vl.id) {
                        vl.isCheck = 1;
                    }
                    return vl;
                })
            }
            
        },
        handleClick(){
            this.init();
        },
        onSubmit(){
            var obj = this.list.filter((item)=>{
                if(item.isCheck == 1) {
                    item.url = item.src_text;
                    return item;
                }
            })
            this.$emit('checkPicture',obj);
        },
        cancel(){
            this.$emit('cancelPicture');
        }
    }
}
</script>

<style>
.i-file{
    font-size: 32px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -16px;
    margin-top: -16px;
}
</style>